<template>
  <div class="xz-table">
    <el-table border v-bind="$attrs">
      <template v-for="item in columns" :key="item.prop">
        <el-table-column v-if="item.slot" v-bind="item">
          <template #header>
            <slot :name="item.slot.header">{{ item.label || '自定义header' }}</slot>
          </template>
          <template #default="scope">
            <slot :name="item.slot.body" :row="scope.row">
              {{ scope.row[item.prop] || '自定义' }}
            </slot>
          </template>
        </el-table-column>

        <el-table-column v-else v-bind="item"></el-table-column>
      </template>
    </el-table>

    <xz-pagination
      class="mt-10 text-right"
      v-if="showPage"
      :pagination="pagination"
      @pageChange="handlePageChange"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import XzPagination from '../XzPagination/index.vue'

export default defineComponent({
  components: { XzPagination },
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    showPage: {
      type: Boolean,
      default: true
    },
    pagination: {
      type: Object,
      default: () => {
        return {
          currentPage: 1,
          pageSize: 10,
          total: 100
        }
      }
    }
  },
  emits: ['pageChange'],
  setup(_, context) {
    const handlePageChange = (options: { key: string; value: number }) => {
      context.emit('pageChange', options)
    }

    return {
      handlePageChange
    }
  }
})
</script>

<style lang="scss" scoped>
.mt-10 {
  margin-top: 10px;
}

.text-right {
  text-align: right;
}
</style>
